<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单计算器</title>
    <script src="./tailwindcss.min.js"></script>
    <link href="./daisyui@3.9.4.full.css" rel="stylesheet" type="text/css" />
</head>
<body class="min-h-screen bg-gradient-to-br from-blue-50 to-yellow-50 flex items-center justify-center p-4">
    <div class="card w-full max-w-lg bg-black shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-2xl font-bold text-gray-800 mb-4">简单计算器</h2>
            
            <!-- 显示屏 -->
            <div class="bg-gray-100 rounded-lg p-4 mb-6 backdrop-blur-sm bg-opacity-70 shadow-inner">
                <div id="operation" class="text-right text-sm text-gray-500 h-6 mb-1"></div>
                <div id="display" class="text-right text-3xl font-semibold text-gray-800 h-10">0</div>
            </div>
            
            <!-- 基础运算按钮区 -->
            <div class="grid grid-cols-4 gap-3 mb-4" id="basic-calculator">
              <!--第一行-->
              <button onclick="clearAll()" class="btn-error col-span-2">AC</button>
              <button onclick="appendOperator('/')" class="btn btn-secondary">÷</button>
              <button onclick="appendOperator('*')" class="btn btn-secondary">×</button>

              <!--数字7-9-->
              <button onclick="appendNumber('7')" class="btn">7</button>
              <button onclick="appendNumber('8')" class="btn">8</button>
              <button onclick="appendNumber('9')" class="btn">9</button>
              <button onclick="appendOperator('-')" class="btn btn-secondary">-</button>

              <!--数字4-6-->
              <button onclick="appendNumber('4')" class="btn">4</button>
              <button onclick="appendNumber('5')" class="btn">5</button>
              <button onclick="appendNumber('6')" class="btn">6</button>
              <button onclick="appendOperator('+')" class="btn btn-secondary">+</button>

              <!--数字1-3-->
              <button onclick="appendNumber('1')" class="btn">1</button>
              <button onclick="appendNumber('2')" class="btn">2</button>
              <button onclick="appendNumber('3')" class="btn">3</button>
              <button onclick="calculate('+')" class="btn btn-primary row-span-2">=</button>

              <!--数字0和小数点-->
              <button onclick="appendNumber('0')" class="btn col-span-2">0</button>
              <button onclick="appendNumber('.')" class="btn">.</button>
            </div>
        </div>  
    </div>

    <script>
        let currentInput = '0';
        let fullExpression = '';
        let resetInput = false;

const display = document.getElementById('display');
const operationDisplay = document.getElementById('operation');

function updateDisplay() {
  display.textContent = currentInput;
  operationDisplay.textContent = fullExpression;
}

function appendNumber(number) {
  if (currentInput === '0' || resetInput) {
    currentInput = number;
    resetInput = false;
  } else {
    currentInput += number;
  }
  fullExpression += number;
  updateDisplay();
}

function appendOperator(op) {
  fullExpression += op;
  currentInput = '0';
  resetInput = true;
  updateDisplay();
}

function appendFunction(func) {
  fullExpression += func;
  if (func.endsWith('(')) {
    currentInput = '0';
    resetInput = true;
  } else {
    currentInput = func;
    resetInput = true;
  }
  updateDisplay();
}

function calculate() {
    try {
        // 替换显示符号为JS可识别的
        let expr = fullExpression
            .replace(/x/g, '*')
            .replace(/÷/g, '/')
            .replace(/\^/g, '**');
       
        const result = eval(expr);
        currentInput = result.toString();
        fullExpression = currentInput;
        resetInput = true;
        updateDisplay();
    } catch (e) {
        currentInput = 'Error';
        updateDisplay();
    }
}

function clearAll() {
    currentInput = '0';
    fullExpression = '';
    resetInput = false;
    updateDisplay();
}
    </script>
</body>
</html>